import {messages} from "share/common";
/**
 * 核定比率
 * 阶梯模式 and 非阶梯模式
 */
import React, {Component} from 'react';
import {Row, Col, InputNumber, Icon} from "antd";
import Condition from "components/condition";
import "styles/request-and-expense-settings/claim-amount-verification.scss"

const { If, Else } = Condition;

class ClaimAmountVerificationRuleDetailCheckRatio extends Component {

  handleAdd = () => {
    let { value } = this.props;
    const len = value.tieredProportions.length;
    value.tieredProportions.push({
      id: value.tieredProportions[len - 1].id + 1,
      startValue: value.tieredProportions[len - 1].endValue,
      compareValueCode: "DAYS_OF_OVERDUE",
      startComparedSymbol: "LESS_THAN_OR_EQUALS",
      endComparedSymbol: "LESS_THAN",
      hitValueType: "NUMBER",
      endValue: '',
      hitValue: ''
    });
    this.props.onChange(value);
  };

  handleDelete = id => {
    let { value } = this.props;
    value.tieredProportions.deleteObj({ id }, 'id');
    this.setState({ value })
  };

  handleChange = (type, changeValue, id) => {
    let { value } = this.props;
    value.tieredProportions.map(item => {
      if (item.id === id) {
        item[type] = changeValue;
      }
    })
    this.props.onChange(value);
  };

  renderRow = item => {
    const { disabled } = this.props;
    return (
      <Row key={item.id} className="verification-rule-detail-ratio-row">
        <Col span={6} className="verification-rule-detail-ratio-row-days">
          <InputNumber
            disabled={disabled}
            min={0}
            precision={0}
            placeholder={messages('expense-8.key75')/*不限制*/}
            value={item.startValue}
            onChange={value => this.handleChange('startValue', value, item.id)}
          />
          <div className="verification-rule-detail-ratio-row-days-text">
            {messages('expense-8.key149')/*天*/}
          </div>
        </Col>
        <Col span={4} className="verification-rule-detail-ratio-row-text">
          ≤ {messages('expense-8.key398')/*逾期天数*/} {`<`}
        </Col>
        <Col span={6} className="verification-rule-detail-ratio-row-days">
          <InputNumber
            disabled={disabled}
            min={0}
            precision={0}
            placeholder={messages('expense-8.key75')/*不限制*/}
            value={item.endValue}
            onChange={value => this.handleChange('endValue', value, item.id)}
          />
          <div className="verification-rule-detail-ratio-row-days-text">
            {messages('expense-8.key149')/*天*/}
          </div>
        </Col>
        <Col span={2} className="verification-rule-detail-ratio-row-text">
          {messages('expense-8.key399')/*扣减*/}
        </Col>
        <Col span={5} className="verification-rule-detail-ratio-row-ratio">
          <InputNumber
            disabled={disabled}
            min={0}
            max={100}
            precision={2}
            placeholder={messages('expense-8.key400')/*例：*/ + '15.50'}
            value={item.hitValue}
            onChange={value => this.handleChange('hitValue', value, item.id)}
          />
          <div className="verification-rule-detail-ratio-row-ratio-text">
            {messages('expense-8.key401')/*%*/}
          </div>
        </Col>
        <If value={this.props.value.tieredProportions.length > 1 && !disabled}>
          <Col span={1} className="verification-rule-detail-ratio-row-delete">
            <Icon type="delete" onClick={() => this.handleDelete(item.id)}/>
          </Col>
        </If>
      </Row>
    )
  };

  renderDeductAmount = () => {
    const { disabled, value, onChange } = this.props;
    return (
      <div>
        {messages('expense-8.key402')/*扣减⾦额：*/}
        {messages('expense-8.key403')/*⾦额基准*/}
        *
        <div className="verification-rule-detail-ratio-deduct-amount">
          <InputNumber
            disabled={disabled}
            min={0}
            max={100}
            precision={2}
            value={value.discountProportion}
            onChange={discountProportion => onChange(Object.assign({}, value, { discountProportion }))}
          />
          <div className="verification-rule-detail-ratio-deduct-amount-text">
            {messages('expense-8.key401')/*%*/}
          </div>
        </div>
        <div className="verification-rule-detail-ratio-deduct-amount-extra">
          {messages('expense-8.key404')/*按金额基准*百分比N；N为2位小数%（例：原费用金额为100，核定差额为 100*20%=20，则最后费用核定金额为100-20=80）*/}
        </div>
      </div>
    )
  };

  render() {
    const { disabled, isLadder, value } = this.props;
    return (
      <div className="verification-rule-detail-ratio">
        <Condition>
          <If value={isLadder}>
            <div className="verification-rule-detail-ratio-title">{messages('expense-8.key405')/*设置比率*/}</div>
            {value.tieredProportions && value.tieredProportions.map(this.renderRow)}
            <If value={!disabled}>
              <a onClick={this.handleAdd}><Icon type="plus" /> {messages('expense-8.key406')/*新增条件*/}</a>
            </If>
          </If>
          <Else>
            {this.renderDeductAmount()}
          </Else>
        </Condition>
      </div>
    );
  }
}

export default ClaimAmountVerificationRuleDetailCheckRatio;
